<template>
  <div class="film">
    <film-top-bar :currentCity='currentCity' @toggleHotItem='toggleHotItem'></film-top-bar>
    <section class="onshow" :class="{'hotshow' : hotShowFlag}">
      <pagination ref='showPage' @loadMore='loadMore'>
        <div class="list">
          <film-card :film='film' v-for="(film,index) in films" :key='index'></film-card>
        </div>
      </pagination>
    </section>
    <section class="onshow" :class="{'hotshow' : !hotShowFlag}">
      <pagination ref='notshowPage' @loadMore='notshowLoadMore'>
        <div class="list">
          <film-horizontal-scroll :items='expect'></film-horizontal-scroll>
          <p  style='background:#f5f5f5;height:10px;'></p>
          <film-card :film='film' v-for="(film,index) in preFilms" :key='index'></film-card>
        </div>
      </pagination>
    </section>
  </div>
</template>
<script>
import FilmTopBar from './FilmTopBar'
import FilmCard from './FilmCard'
import Pagination from '~/pagination'
import FilmHorizontalScroll from './FilmHorizontalScroll'
export default {
  data () {
    return {
      currentCity: {},
      hotShowFlag: true,
      films: [],
      preFilms: [],
      expect: []
    }
  },
  mounted () {
    this.currentCity = this.$storage.get('currentCity') || {}
    this.expectData()
  },
  components: {
    FilmTopBar,
    FilmCard,
    FilmHorizontalScroll,
    Pagination
  },
  methods: {
    loadMore (page) {
      this.$api['movie/onShowPage']({}, {current: page.current, perPage: 15}).then(res => {
        // 数据插入列表
        this.films = this.films.concat(res.items)
        // 通知分页组件，数据加载完毕
        this.$refs.showPage.endUpScroll(res)
      })
    },
    notshowLoadMore (page) {
      this.$api['movie/notShowPage']({}, {current: page.current, perPage: 15}).then(res => {
        // 数据插入列表
        this.preFilms = this.preFilms.concat(res.items)
        // 通知分页组件，数据加载完毕
        this.$refs.notshowPage.endUpScroll(res)
      })
    },
    expectData () {
      this.$api['movie/expectPage']({}, {}).then(res => {
        // 数据插入列表
        this.expect = this.expect.concat(res.items)
      })
    },
    toggleHotItem (hotActive) {
      this.hotShowFlag = (hotActive === 0)
    }
  }
}
</script>
<style lang="scss">
  .film{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .onshow{
      position: absolute;
      top: 90px;
      bottom: 0;
      left: 0;
      right: 0;
      display:none;
    }
    .hotshow{
      display:block;
    }
  }
  .ddiw{
    width:200px;height:100%;margin-right:5px;background:#000;float:left
  }
</style>
